<template>
	<view class="content">
		<!-- 今日能量瓶 -->
		<view class="bottle_box">
			<!-- 能量类型 -->
			<view class="energy_box_flx">
				<view class="nav_box">
					<u-navbar placeholder :safeAreaInsetTop="true" title="水量" :fixed="true" :autoBack="true"
						bgColor="rgba(255, 255, 255, 0)">
					</u-navbar>
				</view>
				<!-- 顶部内容 -->
				<view class="top_r_con">
					{{time}} <text style="margin-left: 20rpx;">更新</text>
				</view>
			</view>
			<!-- 能量类型 -->
			<view class="energy_box">
				<!-- 根据energy_item:nth-child(n) 来调整能量类型盒子的位置-->
				<view class="energy_item" v-for="(item, index) in arrEnergyList" :key="index">
					<!-- 根据index来给不同盒子不同的动画 -->
					<view :class="{
									'float': true,
									'float1': index === 0
								}">
						<view class="energy_info">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<!-- 波浪 -->
			<view class="wave_box wave_animation">
				<view class="wave_imgs wave_imgs1">
					<image class="wave_bg" src="@/static/home/water/wave_1a.png" mode="widthFix">
					</image>
					<image class="wave_bg" src="@/static/home/water/wave_1a.png" mode="widthFix">
					</image>
				</view>
				<view class="wave_imgs">
					<image class="wave_bg" src="@/static/home/water/wave_1b.png" mode="widthFix"></image>
					<image class="wave_bg" src="@/static/home/water/wave_1b.png" mode="widthFix"></image>
				</view>
				<view class="wave_imgs">
					<image class="wave_bg" src="@/static/home/water/wave_1c.png" mode="widthFix"></image>
					<image class="wave_bg" src="@/static/home/water/wave_1c.png" mode="widthFix"></image>
				</view>
				<view class="wave_imgs">
					<image class="wave_bg" src="@/static/home/water/wave_1d.png" mode="widthFix"></image>
					<image class="wave_bg" src="@/static/home/water/wave_1d.png" mode="widthFix"></image>
				</view>

				<!-- 上升的气泡 -->
				<view class="bubble_box">
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
					<span class="bubble_item"></span>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="bom_con">
			<u-transition :show="transhow">
				<view class="flx_list">
					<view class="flx_item" v-for="(i,index) in waterList" :key="index">
						<view class="tit">
							{{i.name}}
						</view>
						<view class="con_f">
							<view class="">
								{{i.max}}
							</view>
						</view>
						<view class="con_f">
							<view class="">
								{{i.mini}}
							</view>
						</view>
					</view>
				</view>
			</u-transition>
			<!-- 分段器 -->
			<view class="" style="background-color: #1156a4;">
				<u-subsection activeColor="#1156a4" inactiveColor="#fff" :bold="false" :list="list" bgColor="#1156a4"
					mode="button" fontSize="16" :current="current1" @change="change1"></u-subsection>
			</view>
			<view class="ech_box">
				<shuiliang ref="mywaterl" :listobjwaterl="objwaterl" v-if="echaIf == 0"></shuiliang>
				<shuishen ref="myshen" :listobjshen="objshen" v-if="echaIf == 1"></shuishen>
			</view>
			<!-- 地址 -->
			<view class="bom_l_con" @click="butt">
				<view class="bom_l_con_flx">
					<u-icon name="map-fill" color="#ffffff" size="26"></u-icon>
					<view class="">
						位置：{{name}}
					</view>
				</view>

			</view>

		</view>
		<!-- 弹窗 -->
		<u-picker :show="showPicker" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import shuiliang from '../waterYield/shuiliang.vue'
	import shuishen from '../waterYield/shuishen.vue'
	import dayjs from '@/common/dayjs.min.js';
	export default {
		components: {
			shuiliang,
			shuishen
		},
		data() {
			return {
				transhow: true,
				echaIf: 0,
				arrEnergyList: [{
					name: '军一支'
				}],
				objwaterl: {},
				objshen: {},
				current1: 0,
				list: ['每小时水量', '24小时水量'],
				showPicker: false,
				columns: [
					['军一支', '赵陵铺', '土贤庄']
				],
				time: '',
				name: '军一支',
				waterList: [{
					name: '1小时',
					mini: '7.2万 m³'
				}, {
					name: '24小时',
					mini: '172.8万 m³',
				}, ],
				objCLC: {
					categories: [],
					series: [{
						data: []
					}],
				},
				subtractTime: ''
			}
		},
		onShow() {
			let now = dayjs()
			this.time = dayjs(now).format('YYYY-MM-DD')
			this.subtractTime = dayjs(now).format('HH')
			// 图表数据 水量
			//水量
			let jun = {
				categories: [this.subtractTime - 10 + ':00', this.subtractTime - 8 + ':00', this.subtractTime - 6 +
					':00', this.subtractTime - 4 + ':00', this.subtractTime - 2 + ':00', this.subtractTime + ':00'
				],
				series: [{
					name: "小时水量",
					data: [6.8, 8.1, 5.9, 6.9, 7.8, 7.2]
				}]
			}
			this.objwaterl = jun
			//24
			let junss = {
				categories: [now.subtract(5, 'day').format('MM-DD'), now.subtract(4, 'day').format('MM-DD'), now.subtract(3, 'day').format('MM-DD'), now.subtract(2, 'day').format('MM-DD'), now.subtract(1, 'day').format('MM-DD'), now.subtract(0, 'day').format('MM-DD')],
				series: [{
					name: "24小时水量",
					data: [163, 186, 175, 169, 175, 169]
				}]
			}
			this.objshen = junss
			setTimeout(() => {
				this.$refs.mywaterl.onloshow()
			}, 100)
		},
		onLoad(option) {
			setTimeout(()=>{
				this.name = option.nickName
				this.arrEnergyList[0].name = option.nickName
			},300)
			
		},
		methods: {
			tranFn() {
				this.transhow = false
				setTimeout(() => {
					this.transhow = true
				}, 500)
			},
			// 分段器
			change1(index) {
				this.current1 = index
				this.echaIf = index
				if (index == 0) {
					setTimeout(() => {
						this.$refs.mywaterl.onloshow()
					}, 100)
				}
				if (index == 1) {
					setTimeout(() => {
						this.$refs.myshen.onloshow()
					}, 100)
				}

			},
			// 地理位置
			butt() {
				this.showPicker = true
			},
			cancel() {
				this.showPicker = false
			},
			confirm(e) {
				let now = dayjs()
				console.log('/////',now.subtract(5, 'day').format('MM-DD'));
				this.tranFn()
				let junyizhi = [{
					name: '水量',
					mini: '18.54 m³',
					max: '23.96 m³'
				}, {
					name: '水深',
					mini: '4.66 m³',
					max: '7.84 m³'
				}, ]
				let zhaolingpu = [{
					name: '水量',
					mini: '13.47 m³',
					max: '17.39 m³'
				}, {
					name: '水深',
					mini: '2.59 m³',
					max: '6.83 m³'
				}, ]
				let tuxianzhuang = [{
					name: '水量',
					mini: '2.68 m³',
					max: '4.82 m³'
				}, {
					name: '水深',
					mini: '1.83 m³',
					max: '5.33 m³'
				}, ]
				// 图表数据
				let jun = {
					categories: [this.subtractTime - 10 + ':00', this.subtractTime - 8 + ':00', this.subtractTime - 6 +
						':00', this.subtractTime - 4 + ':00', this.subtractTime - 2 + ':00', this.subtractTime +
						':00'
					],
					series: [{
						name: "小时水量",
						data: [6.8, 8.1, 5.9, 6.9, 7.8, 7.2]
					}, ]
				}
				let zhao = {
					categories: [this.subtractTime - 10 + ':00', this.subtractTime - 8 + ':00', this.subtractTime - 6 +
						':00', this.subtractTime - 4 + ':00', this.subtractTime - 2 + ':00', this.subtractTime +
						':00'
					],
					series: [{
						name: "小时水量",
						data: [8.2, 17.1, 6.5, 5.9, 7.5, 6.9]
					}]
				}
				let tu = {
					categories: [this.subtractTime - 10 + ':00', this.subtractTime - 8 + ':00', this.subtractTime - 6 +
						':00', this.subtractTime - 4 + ':00', this.subtractTime - 2 + ':00', this.subtractTime +
						':00'
					],
					series: [{
						name: "小时水量",
						data: [6.5, 7.3, 6.4, 5.9, 8.1, 7.6]
					}]
				}
				// 图表数据水痕
				let junss = {
					categories: [now.subtract(5, 'day').format('MM-DD'), now.subtract(4, 'day').format('MM-DD'), now.subtract(3, 'day').format('MM-DD'), now.subtract(2, 'day').format('MM-DD'), now.subtract(1, 'day').format('MM-DD'), now.subtract(0, 'day').format('MM-DD')],
					series: [{
						name: "24小时水量",
						data: [163, 186, 175, 169, 175, 169]
					}]
				}
				let zhaoss = {
					categories: [now.subtract(5, 'day').format('MM-DD'), now.subtract(4, 'day').format('MM-DD'), now.subtract(3, 'day').format('MM-DD'), now.subtract(2, 'day').format('MM-DD'), now.subtract(1, 'day').format('MM-DD'), now.subtract(0, 'day').format('MM-DD')],
					series: [{
						name: "24小时水量",
						data: [182, 176, 169, 176, 189, 159]
					}]
				}
				let tuss = {
					categories: [now.subtract(5, 'day').format('MM-DD'), now.subtract(4, 'day').format('MM-DD'), now.subtract(3, 'day').format('MM-DD'), now.subtract(2, 'day').format('MM-DD'), now.subtract(1, 'day').format('MM-DD'), now.subtract(0, 'day').format('MM-DD')],
					series: [{
						name: "24小时水量",
						data: [169, 176, 179, 168, 181, 168]
					}]
				}

				this.name = e.value[0]
				this.arrEnergyList[0].name = e.value[0]
				if (e.value[0] == '军一支') {
					this.waterList = junyizhi
					this.objwaterl = jun
					this.objshen = junss
				}
				if (e.value[0] == '赵陵铺') {
					this.waterList = zhaolingpu
					this.objwaterl = zhao
					this.objshen = zhaoss
				}
				if (e.value[0] == '土贤庄') {
					this.waterList = tuxianzhuang
					this.objwaterl = tu
					this.objshen = tuss
				}

				setTimeout(() => {
					this.$refs.mywaterl.onloshow()
				}, 100)
				setTimeout(() => {
					this.$refs.myshen.onloshow()
				}, 200)
				this.showPicker = false
			},
		}
	}
</script>

<style scoped lang="less">
	.content {
		// background-color: #f4f4f4;
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		// padding: 24rpx;

		.bottle_box {
			// width: 702rpx;
			// height: 632rpx;
			background: linear-gradient(195deg, #8dbde1 0%, #F7F6ED 100%);
			box-shadow: 0 8px 80px 0 rgba(0, 0, 0, 0.1);
			// border-radius: 20rpx;
			// margin: 15rpx auto 36rpx;
			position: relative;
			// padding-top: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.energy_box {
				width: 100%;
				// height: 282rpx;
				position: absolute;
				top: 30rpx;
				left: 0;

				.float {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					animation-timing-function: linear;
					animation-iteration-count: infinite;
				}

				.float0 {
					animation-name: float0;
					animation-duration: 3s;
				}

				.float1 {
					animation-name: float1;
					animation-duration: 6s;
				}

				.float2 {
					animation-name: float2;
					animation-duration: 3.6s;
				}

				.float3 {
					animation-name: float3;
					animation-duration: 3s;
				}

				.float4 {
					animation-name: float4;
					animation-duration: 6s;
				}

				.float5 {
					animation-name: float5;
					animation-duration: 3.6s;
				}

				.float6 {
					animation-name: float6;
					animation-duration: 6s;
				}

				.energy_item {
					position: absolute;
					z-index: 10;
					width: 20%;
					height: 50%;
					min-width: 20%;

					.energy_img {
						display: block;
						width: 60rpx;
						height: 60rpx;
						margin: 0 auto 10rpx;
					}

					.energy_img_green {
						filter: grayscale(100%);
					}

					.energy_info {
						text-align: center;
						font-size: 40rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #3a4958;
						line-height: 32rpx;
					}
				}

				.energy_item:nth-child(1) {
					left: 4%;
				}

				.energy_item:nth-child(2) {
					left: 18%;
				}

				.energy_item:nth-child(3) {
					left: 30%;
				}

				.energy_item:nth-child(4) {
					left: 44%;
				}

				.energy_item:nth-child(5) {
					left: 52%;
				}

				.energy_item:nth-child(6) {
					left: 64%;
				}

				.energy_item:nth-child(7) {
					left: 78%;
				}
			}

			// 内容
			.energy_box_flx {
				width: 100%;
				height: 400rpx;
				// height: 282rpx;
				position: relative;

				.top_r_con {
					position: absolute;
					top: 200rpx;
					right: 30rpx;
					font-size: 40rpx;
					color: #ffffff;
					margin-left: 15rpx;
				}
			}

			.wave_box {
				width: 100%;
				height: 236rpx;
				padding-top: 40rpx;
				position: relative;
				display: flex;
				align-items: center;

				.wave_imgs {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: 1;

					.wave_bg {
						display: block;
						width: 100%;
						min-width: 100%;
						height: 100%;
						margin: 0;
						padding: 0;
						position: absolute;
						bottom: 0;
					}

					.wave_bg:nth-child(1) {
						left: 0;
						transition: left 0.2s;
					}

					.wave_bg:nth-child(2) {
						left: 100%;
						transition: left 0.2s;
					}

				}

				.wave_imgs1 {
					width: 200%;
				}
			}

			.wave_animation {
				.wave_imgs {
					.wave_bg:nth-child(1) {
						animation-name: wave_animation;
						animation-timing-function: linear;
						animation-iteration-count: infinite;
					}

					.wave_bg:nth-child(2) {
						animation-name: wave_animation2;
						animation-timing-function: linear;
						animation-iteration-count: infinite;
					}
				}

				.wave_imgs:nth-child(1) {
					.wave_bg {
						animation-duration: 3s;
					}

					.wave_bg:nth-child(2) {
						animation-name: wave_animation3;
					}
				}

				.wave_imgs:nth-child(2) {
					.wave_bg {
						animation-duration: 4s;
					}
				}

				.wave_imgs:nth-child(3) {
					.wave_bg {
						animation-duration: 3s;
					}
				}

				.wave_imgs:nth-child(4) {
					.wave_bg {
						animation-duration: 4s;
					}
				}
			}

			.bubble_box {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 8;

				.bubble_item {
					display: block;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.3);
					position: absolute;
					bottom: 0;
				}

				.bubble_item:nth-child(1) {
					width: 30rpx;
					height: 30rpx;
					left: 10%;
					animation: rise 3s infinite linear;
				}

				.bubble_item:nth-child(2) {
					width: 12rpx;
					height: 12rpx;
					left: 15%;
					animation: rise 1.6s infinite linear;
				}

				.bubble_item:nth-child(3) {
					width: 40rpx;
					height: 40rpx;
					left: 28%;
					animation: rise 4s infinite linear;
				}

				.bubble_item:nth-child(4) {
					width: 24rpx;
					height: 24rpx;
					left: 35%;
					animation: rise 2.8s infinite linear;
				}

				.bubble_item:nth-child(5) {
					width: 28rpx;
					height: 28rpx;
					left: 44%;
					animation: rise 3.4s infinite linear;
				}

				.bubble_item:nth-child(6) {
					width: 16rpx;
					height: 16rpx;
					left: 52%;
					animation: rise 2s infinite linear;
				}

				.bubble_item:nth-child(7) {
					width: 24rpx;
					height: 24rpx;
					left: 63%;
					animation: rise 2.4s infinite linear;
				}

				.bubble_item:nth-child(8) {
					width: 30rpx;
					height: 30rpx;
					left: 75%;
					animation: rise 3s infinite linear;
				}

				.bubble_item:nth-child(9) {
					width: 40rpx;
					height: 40rpx;
					left: 88%;
					animation: rise 5s infinite linear;
				}
			}

		}

		// 内容下
		.bom_con {
			position: relative;

			.flx_list {
				width: 690rpx;
				padding: 0 30rpx;
				position: absolute;
				top: -280rpx;
				left: 0;
				z-index: 999;
				color: #ffffff;
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				font-family: 'MyFont';

				.flx_item {
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 30rpx;
					background-color: rgba(0, 0, 0, 0.1);
					display: flex;
					justify-content: space-between;
					text-align: center;
					font-size: 60rpx;

					.tit {
						color: #00ff00;
						text-align: center;
					}

					.con_f {
						color: #00ffff;
						display: flex;
						align-items: center;
						justify-content: space-around;
					}

				}
			}

			.ech_box {
				padding: 20rpx;
				height: 600rpx;
				margin-top: 30rpx;
			}

			.bom_l_con {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ffffff;

				.bom_l_con_flx {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #1156a4;
					border-radius: 20rpx;
					padding: 20rpx 30rpx;
				}
			}

		}
	}

	@keyframes float0 {
		0% {
			top: 10rpx;
		}

		50% {
			top: 50rpx
		}

		100% {
			top: 10rpx;
		}
	}

	@keyframes float1 {
		0% {
			top: 200rpx;
		}

		50% {
			top: 150rpx
		}

		100% {
			top: 200rpx;
		}
	}

	@keyframes float2 {
		0% {
			top: 12rpx;
		}

		50% {
			top: 32rpx
		}

		100% {
			top: 12rpx;
		}
	}

	@keyframes float3 {
		0% {
			top: 136rpx;
		}

		50% {
			top: 116rpx
		}

		100% {
			top: 136rpx;
		}
	}

	@keyframes float4 {
		0% {
			top: -40rpx;
		}

		50% {
			top: -20rpx;
		}

		100% {
			top: -40rpx;
		}
	}

	@keyframes float5 {
		0% {
			top: 146rpx;
		}

		50% {
			top: 126rpx;
		}

		100% {
			top: 146rpx;
		}
	}

	@keyframes float6 {
		0% {
			top: 66rpx;
		}

		50% {
			top: 46rpx;
		}

		100% {
			top: 66rpx;
		}
	}

	@keyframes wave_animation {
		0% {
			left: 0;
		}

		100% {
			left: -100%;
		}
	}

	@keyframes wave_animation2 {
		0% {
			left: 100%;
		}

		100% {
			left: 0;
		}
	}

	@keyframes wave_animation3 {
		0% {
			left: calc(100% - 1rpx);
		}

		100% {
			left: -1rpx;
		}
	}

	@keyframes rise {
		0% {
			bottom: -40rpx;
			opacity: 1;
		}

		75% {
			opacity: 1;
		}

		100% {
			bottom: 100%;
			opacity: 0;
		}
	}

	@keyframes bubble_hor {
		10% {
			width: 0rpx;
			height: 0rpx;
			top: calc(50% + 0rpx);
			opacity: 1;
		}

		20% {
			top: calc(50% + 10rpx);
		}

		30% {

			top: calc(50% + 20rpx);
			opacity: 1;
		}

		40% {
			width: 20rpx;
			height: 20rpx;
			top: calc(50% + 10rpx);
			opacity: 0.9;
		}

		50% {
			top: calc(50% + 0rpx);
			opacity: 0.8;
		}

		60% {
			width: 40rpx;
			height: 40rpx;
			top: calc(50% - 10rpx);
			opacity: 0.7;
		}

		;

		70% {
			top: calc(50% - 20rpx);
			opacity: 0.5;
		}

		80% {
			top: calc(50% - 10rpx);
			opacity: 0.3;
		}

		90% {
			top: calc(50% - 0rpx);
			opacity: 0.1;
		}

		100% {
			width: 60rpx;
			height: 60rpx;
			left: 100%;
			top: calc(50% + 10rpx);
			opacity: 0;
		}
	}
</style>
<style>
	page {
		background-color: #e0eaf4;
	}

	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}
</style>